<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分步表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../../js/lay-module/step-lay/step.css" media="all">
</head>
<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item class="my_carousel-item">
                            <div>
                                <form class="layui-form layuimini-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item ">
                                        <label class="layui-form-label required">客户端名称:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="clientName" lay-verify="required" lay-reqtext="客户端名称不能为空" placeholder="请输入客户端名" value="" class="layui-input" />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">客户端类型:</label>
                                        <div class="layui-input-block">
                                            <select name="clientType" lay-filter="aihao">
                                                <option value=""></option>
                                                <option value="0" selected="">JavaScript Client</option>
                                                <!--<option value="1">.NET MVC</option>-->
                                                <!--<option value="2">游戏</option>
                                                <option value="3">音乐</option>
                                                <option value="4">旅行</option>-->
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">客户端描述:</label>
                                        <div class="layui-input-block">
                                            <textarea name="description" placeholder="" value="" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form layuimini-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">登入回调地址:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="loginRedirectUris" lay-verify="required" lay-reqtext="登入回调地址不能为空" placeholder="请输入登入回调地址" value="" class="layui-input">
                                            <tip>地址多个时请用";"分隔</tip>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">登出回调地址:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="logoutRedirectUris" lay-verify="required" lay-reqtext="登出回调地址不能为空" placeholder="请输入登出回调地址" value="" class="layui-input">
                                            <tip>地址多个时请用";"分隔</tip>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">允许访问地址:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="allowedScopes" lay-verify="required" lay-reqtext="允许访问的接口地址不能为空" placeholder="请输入允许访问的接口地址" value="" class="layui-input">
                                            <tip>地址为多个时请用";"分隔</tip>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">CORS策略:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="allowedCorsOrigins" lay-verify="required" lay-reqtext="指定CORS策略不能为空" placeholder="请输入指定CORS策略原点" value="" class="layui-input">
                                            <tip>策略为多个时请用";"分隔</tip>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;确认入款&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        入款成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next">再入一笔</button>
                                    <button class="layui-btn layui-btn-primary">查看账单</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        layui.use(['form', 'step', 'http'], function () {
            var $ = layui.$, form = layui.form, step = layui.step;
            var $http = layui.http;
            step.render({
                elem: '#stepForm',
                filter: 'stepForm',
                width: '100%', //设置容器宽度
                stepWidth: '750px',
                height: '570px',
                stepItems: [{
                    title: '设置客户端'
                }, {
                    title: '设置资源'
                }, {
                    title: '完成'
                }]
            });

            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.iframeAuto(index);


            var formStep = {};

            form.on('submit(formStep)', function (data) {
                formStep = data.field;
                step.next('#stepForm');
                return false;
            });

            form.on('submit(formStep2)', function (data) {
                var model = $.extend(data.field, formStep);

                $http.httpAsync('api/System/RegisterClient', 'POST', model, function (res) {
                    // layer.alert(data.message);
                    step.next('#stepForm');
                });
                return false;
            });

            $('.pre').click(function () {
                step.pre('#stepForm');
            });

            $('.next').click(function () {
                step.next('#stepForm');
            });
        })
    </script>
</body>
</html>